<!DOCTYPE html>
<!--
    Author: Justin Edse and Adam Wheeler
    Title: mashup.html
    Purpose: This html file lays out the web page for a user to enter
             a stock symbol such as AAPL or GOOG in the text box
             and then get information back about that stock by hitting the submit button.
    Date: 10/31/13
  -->
<html>
  <head>
    <title>Public Stock Ticker and Selection</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="mashsheet.css">
  </head>
  <body>
    <div id="headerdiv">Diversified Stocks and Securities
      <div id="imagediv">
        <img id="cnnimg" src="cnn.jpg" alt="Sorry" height="80" width="140"/>
        <img id="appleimg" src="apple.jpg" alt="No Apple" height="100" width="120"/>
        <img id="microimg" src="microsoft.jpg" alt="No Micro" height="100" width="150"/>
        <img id="amaimg" src="amazon.jpg" alt="No amazon" height="70" width="200"/>
        <img id="nationimg" src="nationwide.jpg" alt="No nationwide" height="50" width="240"/>
        <img id="huntingtonimg" src="huntington.jpg" alt="No huntington" height="70" width="160"/>
        <img id="ciscoimg" src="cisco.gif" alt="No cisco" height="70" width="160"/>
        <img id="ibmimg" src="ibm.jpg" alt="No ibm" height="70" width="160"/>
      </div>
      <p id="headdescription"> - A quick and easy place to find up to date stock 
        information about your favorite companies!</p>
    </div>
    <p>Enter the name of the stock you are interested in below and then click the submit button
      to get back a wealth of information including trades, gains, losses, and more.</p>
    <form id="stockInput">
      Stock Name: <input type="text" id="stockTextBox">
      <input type="button" id="gethist" value="Get History">
    </form>

    <table id="stocktable">
      <tr>
        <th scope="col">Stock Name</th>
        <th scope="col">Price</th>
	    <th scope="col">Symbol</th>
	    <th scope="col">Type of Stock</th>
	    <th scope="col">Number of Shares</th>
      </tr>
      <tr>
        <th id="name" scope="row"></th>
        <th id="price" scope="row"></th>
        <th id="symbol" scope="row"></th>
        <th id="typeofstock" scope="row"></th>
        <th id="volume" scope="row"></th>
      </tr>     
    </table>
    <label id="stockLabel"></label>
    <img src="transparent.png" id="histpic" alt="stock history">
    <script>
function currentText() {
    return document.getElementById("stockTextBox").value
}

function myCallBack(data) {
    console.log(data)
    if (data.list.resources.length > 0) {
        var fields = data.list.resources[0].resource.fields
        document.getElementById("name").innerHTML = fields.name;
        document.getElementById("price").innerHTML = fields.price;
        document.getElementById("symbol").innerHTML = fields.symbol;
        document.getElementById("typeofstock").innerHTML = fields.type;
        document.getElementById("volume").innerHTML = fields.volume;
    }
}

//called when text changes
document.getElementById('stockTextBox').onkeyup = function(e) {
    document.getElementById('histpic').src = 'transparent.png'
    var textValue = currentText()
    if (textValue.length == 0) {return;}
    var script = document.createElement('script');
    script.src = 'http://finance.yahoo.com/webservice/v1/symbols/' +
        textValue + '/quote?format=json&callback=myCallBack';

    document.body.appendChild(script);
}

document.getElementById('gethist').onclick = function(e) {
    document.getElementById('histpic').src = 'http://chart.finance.yahoo.com/z?s=' + currentText()
}
</script>
  </body>
</html>
